<template>
	<v-layout type="main">
		<div class="layout-top">
			<div class="rollback" @click="$router.push('/modelQuantization')">
				<img src="~@/assets/img/prev.png" alt="" />
				<span>返回</span>
			</div>

			<div class="code-description">
				<div class="dea_top">
					<div>
						<el-image
							class="nav_box"
							:src="detailData.model.avatar ? detailData.model.avatar : require('@/assets/img/drone3.jpg')"
							fit="fit"
						></el-image>
					</div>

					<div class="header_box">
						<div class="code-desc-header">
							<div class="title">
								<div class="title-header">
									<span>{{ detailData.model.name }}</span>
								</div>

								<div class="code-tags">
									<div class="user-tag tag">
										<img src="~@/assets/img/user.png" alt="" />
										{{
											detailData.create_user && (detailData.create_user.nick_name || detailData.create_user.username)
										}}
									</div>

									<div
										:class="[
											'status-tag tag',
											{
												danger: detailData.status === 'terminated',
												warning: detailData.status != 'terminated' && detailData.status != 'running',
												success: detailData.status === 'running',
											},
										]"
									>
										{{ statusMap[detailData.status] }}
									</div>

									<div class="time-tag tag">
										<span>创建时间：</span>
										{{ detailData.create_time }}
									</div>

									<div class="time-tag tag">
										<span>更新时间：</span>
										{{ detailData.update_time }}
									</div>
								</div>

								<div class="staet_box">
									<plug-state :statusStr="detailData.status" />
								</div>
							</div>
							<!-- <div class="code-status">
              <plug-state :statusStr="detailData.status" />
            </div> -->
						</div>
					</div>
				</div>

				<!-- <div class="desc-container">
        <el-input type="textarea" placeholder="暂无描述信息" :autosize="{ minRows: 4, maxRows: 4 }" disabled
          v-model="detailData.desc" style="cursor: pointer" />
      </div> -->
			</div>

			<div class="btns-container">
				<div class="alick-handle-btns">
					<!-- <a class="handle-btn" href="javascript:;" @click="start" v-show="detailData.status == 'terminated'">启动</a>
          <a class="handle-btn" href="javascript:;" @click="stop" v-show="detailData.status != 'terminated'">停止</a>
          <a class="handle-btn" href="javascript:;" @click="entry" v-show="detailData.status == 'running'">进入</a> -->

					<el-button
						class="handle-btn"
						type="success"
						size="medium"
						@click="start"
						v-show="detailData.status == 'terminated'"
					>
						启动
					</el-button>
					<el-button
						class="handle-btn"
						type="danger"
						size="medium"
						@click="stop"
						v-show="detailData.status != 'terminated'"
					>
						停止
					</el-button>
					<!--          <el-button class="handle-btn" type="primary" size="medium" @click="entry"-->
					<!--                     v-show="detailData.status == 'running'">-->
					<!--            进入-->
					<!--          </el-button>-->
				</div>
			</div>
		</div>

		<div class="tabs-left">
			<el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
				<el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
			</el-tabs>
		</div>

		<div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
			<router-view
				class="content-detail"
				:version="version"
				:detailData.sync="detailData"
				v-if="detailData"
				@getDetail="getDetail"
			/>
		</div>
	</v-layout>
</template>

<script>
import plugState from "@/components/module/plug-state";
import { getModelConvertDetail, startModelConvert, stopModelConvert } from "@/api/modelConvert";

export default {
	data() {
		return {
			nowRouter: this.$route.name,
			thisRouter: [],
			version: { id: this.$route.query.model_eva_id },
			detailData: null,
			model_eva_id: this.$route.query.model_eva_id,
		};
	},
	components: {
		plugState,
	},
	methods: {
		skip() {
			let path = `/modelQuantization/${this.thisRouter.filter((e) => e.name == this.nowRouter)[0].path}`;
			console.log('path',path);
			if (path == this.$route.path) return;
			this.$router.push({
				path,
				query: {
					model_eva_id: this.model_eva_id,
					id: this.$route.query.id,
				},
			});
		},
		async getDetail() {
			let ret = await getModelConvertDetail({ id: this.model_eva_id });
			console.log(ret);
			console.log("详情信息", ret.data);
			this.detailData = ret.data;
			if (this.detailData.type_id == 1) {
				this.detailData.type = { name: "自定义", id: "1" };
				this.showDiv = true;
			}
		},
		async start() {
			await startModelConvert({ id: this.model_eva_id });
			this.getDetail();
		},
		async stop() {
			await stopModelConvert({ id: this.model_eva_id });
			this.getDetail();
		},
	},
	mounted() {
		let temp = this.$router.options.routes.filter((e) => e.name == "modelConvert" && e.children);
		this.thisRouter = temp[0].children.filter((e) => !e.meta.hideDetails);
		this.getDetail();
	},
	destroyed() {},
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";

.desc-container {
	margin-top: 20px;
}
</style>
